import 'package:cached_network_image/cached_network_image.dart';
import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_study/model/recommend_model.dart';
import 'package:flutter_study/util/navigator_manager.dart';

import 'recommend_photo_gallery_page.dart';
import 'recommend_videoplay_page.dart';

const VIDEO_TYPE = 'video';

class RecommendWidgetItem extends StatelessWidget {
  final RecommendItem item;

  const RecommendWidgetItem({Key key, this.item}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () {
          if (item.data.content.type == VIDEO_TYPE) {
            NavigatorManager.to(RecommendVideoPlayPage(item: item));
          } else {
            NavigatorManager.to(RecommendPhotoGalleryPage(
                galleryItems: item.data.content.data.urls));
          }
        },
        child: Card(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _imageItem(context),
              _contentItem(),
              _infoItem(),
            ],
          ),
        ));
  }

  _imageItem(context) {
    var maxWidth = MediaQuery.of(context).size.width;
    var width = item.data.content.data.width == 0
        ? maxWidth
        : item.data.content.data.width;
    var height = item.data.content.data.height == 0
        ? maxWidth
        : item.data.content.data.height;

    Widget image = Stack(
      children: [
        ExtendedImage.network(
          item.data.content.data.cover.feed,
          shape: BoxShape.rectangle,
          width: maxWidth,
          fit: BoxFit.cover,
          clearMemoryCacheWhenDispose: true,
          //图片从 tree 中移除，清掉内存缓存，以减少内存压力
          borderRadius: const BorderRadius.only(
              topLeft: Radius.circular(5), topRight: Radius.circular(5)),
        ),
        Positioned(
            right: 5,
            top: 5,
            child: Offstage(
              offstage: item.data.content.data.urls != null &&
                  item.data.content.data.urls.length == 1,
              child: Icon(
                item.data.content.type == VIDEO_TYPE
                    ? Icons.play_circle_outline
                    : Icons.photo_library,
                color: Colors.white,
                size: 18,
              ),
            ))
      ],
    );

    image = AspectRatio(
      aspectRatio: width / height,
      child: image,
    );
    return image;
  }

  _contentItem() {
    return Container(
      padding: EdgeInsets.fromLTRB(6, 10, 6, 10),
      child: Text(
        item.data.content.data.description,
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(fontSize: 14, color: Colors.black87),
      ),
    );
  }

  _infoItem() {
    return Container(
      padding: EdgeInsets.fromLTRB(6, 0, 6, 10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Row(
            children: [
              //类似于ClipRRect
              PhysicalModel(
                  clipBehavior: Clip.antiAlias,
                  borderRadius: BorderRadius.circular(12),
                  child: CachedNetworkImage(
                    width: 24,
                    height: 24,
                    imageUrl: item.data.content.data.owner.avatar,
                  ),
                  color: Colors.transparent),
              Container(
                padding: EdgeInsets.all(5),
                width: 80,
                child: Text(
                  item.data.content.data.owner.nickname,
                  style: TextStyle(fontSize: 12),
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              )
            ],
          ),
          Row(
            children: [
              Icon(Icons.thumb_up, size: 14, color: Colors.grey),
              Padding(
                padding: EdgeInsets.only(left: 3),
                child: Text(
                  "${item.data.content.data.consumption.collectionCount}",
                  style: TextStyle(fontSize: 12),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}



